<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        a{
            display: block;
        }
        body{
            background-color: #fff;
        }
        .item{
            width: 300px;
            margin: 30px auto;
        }
        .item .album img{
            width: 100%;
            display: block;
            border-radius: 8px;
        }
        .item .info p{
            font-size: 15px;
            margin-top: 8px;
            color: #000;

            /* 省略号 1行 */
            /* white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis; */

            /* 省略号 2行 */
            display: -webkit-box;
            -webkit-line-clamp: 2;
            overflow: hidden;
            -webkit-box-orient: vertical;
        }

        .item .info .anchor{
            font-size: 13px;
            color: #888;
            margin-top: 5px;
        }
        /* 在anchor内部的最前面插入up图标 */
        /* ::before 代表伪元素（盒子） */
        .item .info .anchor::before{
            display: inline-block;
            width: 16px;
            height: 16px;
            content: url("./images/widget-up.svg");

            /* 对元素作局部调整 */
            position: relative;
            top: 1px;
        }
    </style>
</head>
<body>
    <div class="item">
        <div class="album">
            <a href="#">
                <img src="https://i0.hdslb.com/bfs/live/f93b1a76dc68e768c6ca64e4eb33fee8a80bf034.jpg@672w_378h_1c" alt="">
            </a>
        </div>
        <div class="info">
            <a href="#">
                <p>挑战深渊打不满星送120原石，免费,挑战深渊打不满星送120原石，免费,挑战深渊打不满星送120原石，免费</p>
            </a>
            <a class="anchor" href="#">
                <!-- 伪元素 -->
                <span class="nickname">这是你的氟西汀</span>
                <span class="time">3-20</span>
            </a>
        </div>
    </div>
    <div class="item">
        <div class="album">
            <a href="#">
                <img src="https://i0.hdslb.com/bfs/live/f93b1a76dc68e768c6ca64e4eb33fee8a80bf034.jpg@672w_378h_1c" alt="">
            </a>
        </div>
        <div class="info">
            <a href="#">
                <p>挑战深渊打不满星送120原石，免费,挑战深渊打不满星送120原石，免费,挑战深渊打不满星送120原石，免费</p>
            </a>
            <a class="anchor" href="#">
                <!-- 伪元素 -->
                <span class="nickname">这是你的氟西汀</span>
                <span class="time">3-20</span>
            </a>
        </div>
    </div>
</body>
</html>